<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--      <link rel="stylesheet" href="/css/element-index.css" />-->
  <link rel="stylesheet" href="./css/password.css">
</head>
<body>
<div class="box-connertai">
  <el-container class="box-com">
    <el-header>
      <el-steps :active="active" finish-status="success" simple >
        <el-step title="步骤 1" ></el-step>
        <el-step title="步骤 2" ></el-step>
        <el-step title="步骤 3" ></el-step>
      </el-steps>
    </el-header>
    <el-main>
      <el-card class="box-card" v-show="active >= 3 ? false : true">
        <div slot="header" class="clearfix">
          <span>修改密码</span>
        </div>
        <div v-if="active == 1" class="topuo">
          <el-form
                  ref="form"
                  status-icon
                  hide-required-asterisk
                  :model="dynamicValidateForm"
                  label-width="80px"
                  class="rotp"
          >
            <el-form-item
                    prop="email"
                    label="输入邮箱"
                    :rules="[
                  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                  { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ]"
            >
              <el-input
                      v-model="dynamicValidateForm.email"
                      placeholder="请输入邮箱地址"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="active == 2" class="topuo">
          <el-form
                  ref="form"
                  status-icon
                  hide-required-asterisk
                  :model="User"
                  label-width="80px"
                  :rules="formRules"
          >
            <el-form-item label="新的密码" prop="username">
              <el-input v-model="User.username"  show-password placeholder="请输入最低6位数密码"></el-input>
            </el-form-item>
            <el-form-item label="确定密码" prop="password">
              <el-input v-model="User.password"  show-password placeholder="请确定密码"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="poro" v-show="active >= 3 ? false : true">
          <el-button @click="next">下一步</el-button>
        </div>
      </el-card>
      <div v-show="active == 3">
        <el-row>
          <el-col :sm="24" :lg="24">
            <el-result icon="success" title="修改密码成功" subTitle="点击返回登录页面">
              <template slot="extra">
                <el-button type="primary" size="medium" @click="black">返回</el-button>
              </template>
            </el-result>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</div>
</body>
<script src="/js/vue2.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>-->
<!-- 样式 结构 -->
<script src="/js/element-index.js"></script>
<script>
    const vm=new Vue({
        data(){
            // 对密码的两次效验
            var ckeckped = (rule, value, callback) => {
                if (value.trim().length == 0) {
                    console.log(value)
                    callback(new Error('密码不能为空'))
                } else if (value != this.User.username) {
                    callback(new Error('2次密码不一致'))
                } else {
                    callback()
                }
            }
            return{
                dynamicValidateForm: {
                    email: '',
                    emilt: ''
                },
                //密码更改
                User: {
                    username: '',
                    password: ''
                },
                //绑定formRules表单验证
                formRules: {
                    username: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {
                            pattern: /[\w]+/,
                            message: '不能是中文字符',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^\S{6,}$/,
                            message: '不能是少于六位数',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        { validator: ckeckped, trigger: 'blur' },
                        {
                            pattern: /[\w]+/,

                            message: '不能是中文字符',
                            trigger: 'blur'
                        }
                    ]
                },
                active: 1,
                name: '',

                disabled: false,
                minin: 60,
                toCode: '获取验证码'
            }
        },
        methods: {
            next() {
                this.$refs['form'].validate(valid => {
                    // console.log(valid)
                    // 如果为true那就进行跳转
                    if (valid) {
                        if (this.active++ >= 3) this.active = 3
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            tocode() {
                this.disabled = true
                let timers = setInterval(() => {
                    this.minin--
                    if (this.minin <= 0) {
                        clearInterval(timers)
                        // 禁用点击框
                        this.disabled = false
                        // 改变值
                        this.toCode = `获取验证码`
                        this.minin = 60
                        return
                    }
                    this.toCode = `${this.minin}后重新发送`
                }, 1000)
            },
            black() {
                // 返回页面
                location.href='login.html'
            }
        }
    }).$mount('.box-connertai')
</script>
</html>